window.onload = function (){
    var myCircle = document.querySelector(".banner_circle");

    // 顶部搜索栏滑动改变透明度
    var height = document.querySelector('.jd_banner').offsetHeight;
    window.onscroll = function(){
       var jd_top = document.querySelector('.jd_top');
       var scrollHeight = document.documentElement.scrollTop;
       var biLi = scrollHeight /height;
       if(biLi<1){
            jd_top.style.backgroundColor = "rgba(233, 35, 34,"+ biLi+")";
       }else{
          return;
       }
    }
    //设置倒计时
    var endTime = + new Date("2018-10-30 19:16:00");
    function remain (){
        var startTime = + new Date();
        var remainTime = endTime - startTime;
        // 计算剩余的小时，分钟，秒数
        var hour =parseInt(remainTime/1000/60/60) ;
        var minate = parseInt(remainTime/1000/60%60);
        var seconds = parseInt(remainTime/1000%60);
        if(remainTime<=0){
            // 将span内的内容全部清零，并退出
            
            clearInterval(timer);
            return;
        }else{
            // 将数字渲染到页面中
            var time = document.querySelector('.time');
            var one =time.querySelector("span:first-of-type");
            var two = time.querySelector("span:nth-of-type(2)");
            var four = time.querySelector("span:nth-of-type(4)");
            var five = time.querySelector("span:nth-of-type(5)");
            var seven = time.querySelector("span:nth-of-type(7)");
            var eight = time.querySelector("span:nth-of-type(8)");
            one.innerText = parseInt(hour/10);
            two.innerText = parseInt(hour%10);
            four.innerText = parseInt(minate/10);
            five.innerText = parseInt(minate%10);
            seven.innerText = parseInt(seconds/10);
            eight.innerText = parseInt(seconds%10);
        }
    }
    var timer = setInterval(remain,1000);
    // 轮播图  原生js
    // 1.创建 前后两张图片，并默认显示第二张，改变图片的宽度
    var jd_banner = document.querySelector('.jd_banner');
    var width = jd_banner.offsetWidth;
    var banner_img = document.querySelector(".banner_img");
    var first = banner_img.querySelector("li:first-of-type");
    var last = banner_img.querySelector("li:last-of-type");
    banner_img.appendChild(first.cloneNode(true));
    banner_img.insertBefore(last.cloneNode(true),banner_img.firstChild);
    var count = banner_img.children.length;
    banner_img.style.width = count*width +"px";
    for(var i=0;i<count;i++){
        banner_img.children[i].style.width = width +"px";
    }
    //默认显示第二张
    var index =1;
    banner_img.style.left = - index*width+"px";
    window.onresize=function(){
        /*4.1.获取banner的宽度,覆盖全局的宽度值*/
        bannerWidth=jd_banner.offsetWidth;
        /*4.2 设置图片盒子的宽度*/
        banner_img.style.width=count*bannerWidth+"px";
        /*4.3设置每一个li(图片)元素的宽度*/
        for(var i=0;i<count;i++){
            banner_img.children[i].style.width=bannerWidth+"px";
        }
        /*4.4重新设置定位值*/
        banner_img.style.left=-(index *bannerWidth)+"px";
    }
    //实现自动轮播
    var timer2;
        function autoPlay (){
             timer2 = setInterval(function(){
                // if(timer2){
                //     clearInterval(timer2);
                // }
                index++;
                banner_img.style.transition = "left 0.5s";
                banner_img.style.left = -index *width +"px";
                setTimeout(function(){
                    if(index==count-1){
                        index=1;
                        banner_img.style.transition = "none";
                        banner_img.style.left = -index *width +"px";
                         circle(index);

                    }
                },500);
               
            },1000);
        }
        autoPlay();
    //实现手动轮播
    var startX,moveX,distanceX;
    var isEnd = true;
    jd_banner.addEventListener('touchstart',function(e){
        clearInterval(timer2);
         startX = e.targetTouches[0].clientX;       
    });
    jd_banner.addEventListener('touchmove',function(e){
        if(isEnd){
            moveX = e.targetTouches[0].clientX;
            distanceX = moveX - startX;
            banner_img.style.left = (-index*width +distanceX )+"px"; 
        }
         
    });
    jd_banner.addEventListener("touchend",function(e){
        isEnd=false;
        /*获取当前滑动的距离，判断距离是否超出指定的范围 100px*/
        if(Math.abs(distanceX) > 100){
            /*判断滑动的方向*/
            if(distanceX > 0){//上一张
                index--;
            }
            else{ //下一张
                index++;
            }
            /*翻页*/
            banner_img.style.transition="left 0.5s ease-in-out";
            banner_img.style.left=-index*width+"px";
        }
        else if(Math.abs(distanceX) > 0){ //得保证用户确实进行过滑动操作
            /*回弹*/
            banner_img.style.transition="left 0.5s ease-in-out";
            banner_img.style.left=-index*width+"px";
        }
        /*将上一次move所产生的数据重置为0*/
        startX=0;
        moveX=0;
        distanceX=0;
    });
    jd_banner.addEventListener("webkitTransitionEnd",function(){
        if(index==count-1){
            index=1;
            banner_img.style.transition = "none";
            banner_img.style.left = -index* width +"px";
            
        }else if(index==0){
            index=count-2;
            banner_img.style.transition = "none";
            banner_img.style.left = -index* width +"px";
        }
        // console.log(index); 
        circle(index);       
        setTimeout(function(){
            isEnd=true;
            /*清除之前添加的定时器*/
            clearInterval(timer2);
            //重新开启定时器
           autoPlay();},100);
    });
    //设置点标记 0-7
    function circle (index){
      
        
        for(var i=0;i<myCircle.children.length;i++){
            myCircle.children[i].classList.remove("active");
        }
        
       
        myCircle.children[index-1].classList.add("active");
    }
    
}
